<div class="self">
    <h2>Self</h2>
    <div class="need-to-add" style="margin-bottom: 50px;">
        <p>Title: <span id="self-title"></span></p>
        <p>Email: <span id="self-email"></span></p>
    </div>
    <div class="persona persona-xl self">
        <div class="note-c">
            <div id="txt-note" class="editable" contenteditable="true" placeholder="What's happening today?"></div>
            <div class="tick"></div>
        </div>
        <div class="photo-c">
            <img src="images/default.png" />
            <div class="photo-presence"></div>
        </div>
        <div class="detail">
            <div id="self-name" class="primary"></div>
            <select id="sel-presence" class="secondary">
                <option value="Online">Available</option>
                <option value="Busy">Busy</option>
                <option value="DoNotDisturb">Do not disturb</option>
                <option value="BeRightBack">Be right back</option>
                <option value="Away">Appear away</option>
            </select>
            <div id="self-location" class="editable tertiary" contenteditable="true" placeholder="Enter a Location"></div>
        </div>
    </div>
</div>